<template>
  <div class="product-list">
    <el-card class="box-card product-list-card" shadow="never">
      <div slot="header" class="clearfix">
        <CardHeader> </CardHeader>
      </div>
      <CardinputVue :text="'请输入搜索信息'"></CardinputVue>
    </el-card>
    <el-card class="box-card product-list-card" shadow="never">
      <div slot="header" class="clearfix">
        <CardDate @add="add()"></CardDate>
      </div>
      <el-table :data="tableData" class="type-table" height="325" border style="width: 100%">
        <el-table-column prop="reason_id" label="编号" align="center"></el-table-column>
        <el-table-column prop="reason_name" label="退货理由" align="center"></el-table-column>
        <el-table-column label="是否启动" align="center">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status" active-color="#13ce66" inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="openChange(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog title="编辑商品轮播图信息" class="chang-product" :close-on-click-modal="false" :visible.sync="dialogFormVisible"
      center>
      <el-form class="info-form" inline :model="alterForm" ref='changeFrom'>
        <el-form-item label="退货理由：" prop="reason_name">
          <el-input size="small" v-model="alterForm.reason_name" placeholder="请输入退货理由"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" style="padding: 12px 43px;margin: 0 30px;" @click="submitChange('changeFrom')">确
          定</el-button>
        <el-button style="padding: 12px 43px;margin: 0 30px;" @click="cancelChange('changeFrom')">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { showReturn, updataReturn, } from '@/api';
import CardDate from '@/components/commodity/CardDate.vue';
import CardHeader from '@/components/commodity/CardHeader.vue';
import CardinputVue from '@/components/commodity/Cardinput.vue';
export default {
  name: 'KodaiReturnReason',

  data () {
    return {
      tableData: [],
      dialogFormVisible: false,
      alterForm: []
    };
  },

  mounted () {
    showReturn().then(res => {
      this.tableData = res.data.data.map(item => {
        item.status = item.status == '1' ? true : false;
        return item;
      });
    });
  },

  methods: {
    cancelChange (data) {
      this.dialogFormVisible = false
      showReturn().then(res => {
      this.tableData = res.data.data.map(item => {
        item.status = item.status == '1' ? true : false;
        return item;
      });
    });
    },
    openChange (data) {
      this.dialogFormVisible = true
      data.status = data.status == true ? '1' : '0';
      this.alterForm = data
    },
    submitChange () {
      let loading = this.$loading({ lock: true, text: "加载中", background: "rgba(0, 0, 0, 0.7)" });
      updataReturn(this.alterForm).then(res => {
        console.log(res);
        loading.close();
        if (res.data.code === 200) {
          this.$router.go(0)
          this.$notify({ title: '成功', message: '修改成功', type: 'success' });
        } else {

          this.$notify({ title: '错误', message: res.data.msg, type: 'error' });
        }
      }).catch((err) => {
        loading.close();
        this.$message.error(err);
      })
    }
  },
  components: {
    CardDate, CardHeader, CardinputVue
  }
};
</script>

<style lang="scss" scoped></style>